<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="/static/js/mui.min.js"></script>
    <link href="/static/css/mui.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/static/dist/css/sm.min.css">
    <link rel="stylesheet" href="/static/dist/css/sm-extend.min.css">
    <script type="text/javascript" charset="utf-8">
        mui.init();
    </script>
    <style>
        button {
            float: left;
        }
    </style>
</head>
<body>
<div class="page">
    <header id="header" class="mui-bar mui-bar-nav">

        <h1 class="mui-title">开始刷词</h1>
        <button class="mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"
                onclick="window.location.href='/index'"><span
                class="mui-icon mui-icon-left-nav"></span>首页
        </button>
    </header>
    <nav class="bar bar-tab">
        <a class="tab-item" href="/index">
            <span class="mui-icon mui-icon-flag"></span>
            <span class="tab-label">刷词模式</span>
        </a>
        <a class="tab-item" href="/unit_list">
            <span class="mui-icon mui-icon-bars"></span>
            <span class="tab-label">看词模式</span>
        </a>
        <a class="tab-item" href="/add_word_page">
            <span class="mui-icon mui-icon-compose"></span>
            <span class="tab-label">添加单词</span>
        </a>
    </nav>

    <div class="content">
        <br/>
        <br/>
        {% if word %}
            <div class="mui-card">
            <a href=""><span class="mui-badge mui-badge-green"
                      style="margin-top: 1%;margin-left: 1%;background-color: blue">{{ remain }}</span></a>

                <a id="icon-star" class="">
                    {% if is_star == '1' %}
                        <span class="mui-icon mui-icon-star-filled collect"
                              style="color: orange;float: right;margin-top: 1px;margin-right: 1px"></span>
                    {% else %}
                        <span class="mui-icon mui-icon-star collect"
                              style="color: #7f7f7f;float: right;margin-top: 1px;margin-right: 1px"></span>
                    {% endif %}
                </a>
                <h1 class="word-detail" style="text-align: center" id="word-detail">{{ word }}</h1>
                <form class="mui-input-group">
                </form>

            <br>
                <p style="text-align: center" id="show-unit">点击显示章节</p>
                <p style="text-align: center" id="unit" hidden>{{ unit }}</p>
            <br>

            </div>

            <button type="button" class="mui-btn mui-btn-warning mui-btn-block"
                    style="width: 45%;margin-left: 3%;background-color: orange"
                    id="save" value="{{ index }}">不记得
            </button>
            <button type="button" class="mui-btn mui-btn-success mui-btn-block"
                    style="width: 45%;margin-left: 4%;background-color: #2ac845"
                    id="delete" value="{{ index }}">记得
            </button>
            <p style="text-align: center;">（点击单词跳转释义）</p>


        {% else %}
            <h1 style="text-align: center">刷词结束</h1>
        {% endif %}
    </div>

</div>


</body>
<script src='//cdn.bootcss.com/jquery/3.1.1/jquery.min.js'></script>
<script src='/static/dist/js/sm.js'></script>
<script src='/static/dist/js/sm-extend.js'></script>
<script src='/static/dist/layer/layer.js'></script>

<script>
    $(function () {
        $(".word-detail").click(function() {
            let word = $(this).text();
            window.location.href="https://m.youdao.com/dict?q=" + word + "&le=eng";
        });

        $("#show-unit").click(function () {
            $("#show-unit").hide();
            $("#unit").show();
        });

        $("#save").click(function () {
            dictate_next($(this).attr("value"), "1");
        });

        $("#delete").click(function () {
            dictate_next($(this).attr("value"), "2");
        });

        $(".collect").click(function () {
            let word = $("#word-detail").text();
            let unit_name = $("#unit").text();
            let this_com = $(this);
            if ($(this).hasClass("mui-icon-star")) {
                {# 收藏 #}
                $.ajax({
                    url: "/star_word?word=" + word + "&unit_name=" + unit_name,
                    method: "GET",
                    success: function () {
                        this_com.removeClass("mui-icon-star");
                        this_com.addClass("mui-icon-star-filled");

                        this_com.attr("style", "color: orange;float: right;margin-top: 1px;margin-right: 1px");
                        mui.toast("收藏成功");
                    }
                })
            } else {
                {# 取消收藏 #}
                $.ajax({
                    url: "/cancel_star_word?word=" + word,
                    method: "GET",
                    success: function () {
                        this_com.removeClass("mui-icon-star-filled");
                        this_com.addClass("mui-icon-star");
                        this_com.attr("style", "color: #7f7f7f;float: right;margin-top: 1px;margin-right: 1px");
                        mui.toast("取消收藏成功");
                    }
                })
            }
        });


        function dictate_next(index, type) {
            window.location.replace("/dictate?index=" + index + "&op_type=" + type);
        }

    });
</script>
</html>